<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas基础</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <polygon points="100,10 40,180 190,60 10,60 160,180"
        style="fill: lime;stroke: purple;stroke-width: 5;fill-rule: evenodd;">
    </polygon>
</svg>
</body>
<script>
    var c=document.getElementById('myCanvas');
    var ctx=c.getContext("2d");
    //绘制矩形
    ctx.fillStyle="#0055FF";
    ctx.fillRect(0,0,0150,75);
    //画一条线
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();
    //画一个圆
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
    //加入字
    ctx.font="30px Arial";
    ctx.fillText("HEllo world",10,50);
    ctx.strokeText("你好",0,90);
    //渐变
    var c2=document.getElementById("myCanvas2");
    var ctx2=c2.getContext("2d");
    var grd=ctx2.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    ctx2.fillStyle=grd;
    ctx2.fillRect(10,10,150,80);
</script>
</html>